<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px" :rules="rules">
      <el-form-item label="身份证号" prop="patientIdcard">
        <el-input
          v-model="queryParams.patientIdcard"
          placeholder="请输入身份证号码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">加载身份证号码</el-button>
        <el-button  type="warning"icon="el-icon-refresh" size="mini" @click="handleAdd">增加患者信息</el-button>

      </el-form-item>

    </el-form>


    <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" height="88">

      <el-table-column label="身份证号" align="center" prop="patientId" />
        <el-table-column label="患者姓名" align="center" prop="patientName" />
      <el-table-column label="患者电话" align="center" prop="patientPhone" />
      <el-table-column label="性别" align="center" prop="patientSex" />
      <el-table-column label="出生日期" align="center" prop="patientBirth" />
      <el-table-column label="患者年龄" align="center" prop="patientAge" />
      <el-table-column label="地址信息" align="center" prop="patientAddr" />

    </el-table>

    <div style="padding-bottom: 15px; padding-top: 20px;padding-left: 20px;margin-top: 30px; margin-bottom:10px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-button-group>
        <el-button @click="menzhen1" >门诊</el-button>
        <el-button @click="menzhen2">门诊+病例本</el-button>
        <el-button @click="jizhen1">急诊</el-button>
        <el-button @click="jizhen2">急诊+病例本</el-button>
      </el-button-group>

      <span style="float:right;margin-right: 20px;font-size: 15px">
    挂号费：{{price}}￥<el-button icon="el-icon-search" type="danger"size="mini" @click="registerAdd">挂号收费</el-button></span>

    </div>


    <div style="padding-left:20px;padding-top:15px;padding-right: 20px; height: 100%; margin-bottom: 30px; margin-top: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) ">
      <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
        <el-form-item label="所属科室" prop="departName">
          <el-input
            v-model="queryParams.departName"
            placeholder="请输入所属科室"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery2"
          />
        </el-form-item>

        <el-form-item  label="挂号类型" prop="registerType">

          <el-select v-model="queryParams.registerType" placeholder="请选择" prop="registerType" >
          <el-option

            v-for="item in typeOptions"
            :key="item.registerTypeId"
            :label="item.registerType"
            :value="item.registerType"
            :disabled="item.status == 1"
          >

          </el-option>
        </el-select>

        </el-form-item>
        <el-form-item label="挂号时段" prop="registerSubsectionTime">
          <el-input
            v-model="queryParams.registerSubsectionTime"
            placeholder="挂号时段"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery2"
          />
        </el-form-item>

        <el-form-item label="挂号时间" >
          <div class="block">
            <el-date-picker
              v-model="queryParams.registerTime"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              @keyup.enter.native="handleQuery2">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery2">搜索</el-button>
          <el-button type="primary"  icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" border   align:center :data="pateintList" :cell-style="rowStyle"  style="width: 100%;height:83%" @selection-change="handleSelectionChange">
        <el-table-column label="科室ID" prop="departId" align="center"height:20px/>
        <el-table-column label="科室名称" prop="departName" :show-overflow-tooltip="true" align="center" height:20px />
        <el-table-column label="当前号数" prop="registerSort" :show-overflow-tooltip="true" align="center"height:20px />
      </el-table>


    </div>
    <!--页数-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList2"
    />

    <!-- 添加患者信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="患者姓名" prop="patientName">
          <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
        </el-form-item>
        <el-form-item label="年龄" prop="patientAge">
          <el-input v-model="form.patientAge" placeholder="请输入年龄" />
        </el-form-item>
        <el-form-item label="性别" prop="patientSex">
          <el-radio-group v-model="form.patientSex">
            <el-radio
              v-for="dict in sexOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>


        <el-form-item  label="所属科室" prop="patientDept">
          <el-select v-model="form.patientDept" placeholder="请选择" prop="departId" >
            <el-option
              v-for="item in deptOptions"
              :key="item.departId"
              :label="item.departName"
              :value="item.departId"
            >
            </el-option>
          </el-select>



        </el-form-item>
        <el-form-item label="身份证号码" prop="patientIdcard">
          <el-input v-model="form.patientIdcard" placeholder="请输入身份证号码" />
        </el-form-item>
        <el-form-item label="电话号" prop="patientPhone">
          <el-input v-model="form.patientPhone" placeholder="请输入电话号" />
        </el-form-item>
        <el-form-item label="地址" prop="patientAddr">
          <el-input v-model="form.patientAddr" placeholder="请输入地址" />
        </el-form-item>

        <el-form-item label="出生日期" >
          <div class="block" >
            <el-date-picker
              v-model="form.patientBirth"
              align="right"
              type="date"
              style="width: 360px"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="过敏史" prop="patientAlle">
          <el-input v-model="form.patientAlle" placeholder="请输入过敏史" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加挂号信息对话框 -->
    <el-dialog :title="title" :visible.sync="opens" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <el-form-item label="挂号单号" prop="registerId">
          <el-input v-model="form.registerId"  placeholder="请输入挂号单号,格式为:GH+当前时间,如:GH2113"  style="width: 290px"/>
        </el-form-item>

        <el-form-item  label="患者姓名" prop="patientId">
          <el-select v-model="form.patientId" filterable placeholder="请选择"  style="width: 290px">
            <el-option
              v-for="item in patientOptions"
              :key="item.patientId"
              :label="item.patientName"
              :value="item.patientId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item  label="所属科室" prop="departId">
          <el-select v-model="form.departId" placeholder="请选择"  style="width: 290px" @change="change(num)" >
            <el-option
              v-for="item in deptOptions"
              :key="item.departId"
              :label="item.departName"
              :value="item.departId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item  label="医生姓名" prop="doctorId">
          <el-select v-model="form.doctorId" filterable placeholder="请选择" style="width: 290px" >
            <el-option
              v-for="item in doctorOptions"
              :key="item.doctorId"
              :label="item.doctorName"
              :value="item.doctorId"
            >
            </el-option>
          </el-select>
        </el-form-item>

          <el-form-item  label="挂号类型" prop="registerType">
            <el-select v-model="form.registerType" placeholder="请选择"  style="width: 290px" >
              <el-option
                v-for="item in typeOptions"
                :key="item.registerTypeId"
                :label="item.registerType"
                :value="item.registerType"
                :disabled="item.status == 1"
              >
              </el-option>
            </el-select>
          </el-form-item>

        <el-form-item label="挂号时段" prop="registerSubsectionTime">
          <el-input v-model="form.registerSubsectionTime" placeholder="请输入挂号时段" style="width: 290px"/>
        </el-form-item>

        <el-form-item label="挂号时间" >
          <div class="block">
            <el-date-picker
              v-model="form.registerTime"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              style="width: 290px"
              @keyup.enter.native="handleQuery2">
            </el-date-picker>
          </div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForms">确 定</el-button>
        <el-button @click="cancels">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { validateIdNo,findPatient,findRegister, findRegisterType,addpatient,findDeptList,findPatientList,selectDoctorList,addRegister } from "@/api/outpatient/patient";

export default {
  name: "Post",
  data() {
    return {
      price:0,
      code: '',
      // 遮罩层
      loading: true,
      registerTypes:[],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      //查询挂号列表
      pateintList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      opens: false,
      // 状态数据字典
      statusOptions: [],
      //性别字典
        sexOptions:[],
      //
        typeOptions:[],
        //科室选择器
        deptOptions:[],
        //收费字典
        costOptions:[],
        //医生选择器
        doctorOptions:[],
        //患者选择器：
        patientOptions:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        patientIdcard: undefined
      },

        // 表单参数
      form: {
          pageNum: 1,
          pageSize: 10,

      },
      // 表单校验
      rules: {
       patientPhone:[
           {
               required: true,
               pattern:/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
               message: "请输入正确的手机号码",
               trigger: "blur"
           }
       ],
       patientIdcard: [
           { required: true, validator: validateIdNo, trigger: "blur" }
        ],
          registerId:[
              {
                  required: true,
                  pattern:/^^[GH]+[0-9]{12}$/,
                  message: "请输入挂号单号,格式为:GH+当前时间,如:GH202103232113",
                  trigger: "blur"
              }
          ]
      },
      pickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
        },
        registerTime: '',
    };
  },


  created() {

    this.getList1();
    this.getList2();
    this.selectType();
    //字典下拉框
    this.getDicts("sys_normal_disable").then(response => {
      this.statusOptions = response.data;
    });
      this.getDicts("sys_user_sex").then(response => {
          this.sexOptions = response.data;
      });
      this.getDicts("order_pay_status").then(response => {
          this.costOptions = response.data;
      });
      //自建下拉框
    findRegisterType().then(response => {
          console.log(response)
          this.typeOptions = response.data;
      });
    findDeptList().then(response => {
          console.log(response)
          this.deptOptions = response.data;
      });
      findPatientList().then(response => {
          console.log(response)
          this.patientOptions = response.data;
      });
      selectDoctorList().then(response => {
          console.log(response)
          this.doctorOptions = response.data;
      });
  },
  methods: {
      menzhen1() {
          this.price = 6;
      },
      menzhen2() {
          this.price = 3;
      },
      jizhen1() {
          this.price = 10;
      },
      jizhen2() {
          this.price = 8;
      },

      /** 查询岗位列表 */
      getList1() {
          this.loading = true;
          findPatient(this.queryParams).then(response => {
              this.postList = response.rows;
              this.total = response.total;
              this.loading = false;
          });
      },
      getList2() {
          this.loading = true;
          findRegister(this.queryParams, this.registerTime).then(response => {
              this.pateintList = response.rows;
              this.total = response.total;
              this.loading = false;
          });
      },

      // 岗位状态字典翻译
      statusFormat(row, column) {
          return this.selectDictLabel(this.statusOptions, row.status);
      },
      // 取消按钮
      cancel() {
          this.open = false;
          this.reset();
      },
      // 取消按钮
      cancels() {
          this.opens = false;
          this.reset();
      },
      // 表单重置
      reset() {
          this.form = {
              postId: undefined,
              postCode: undefined,
              postName: undefined,
              postSort: 0,
              status: "0",
              remark: undefined
          };
          this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList1();
      },

      handleQuery2() {
          this.queryParams.pageNum = 1;
          this.getList2();
      },
      /** 重置按钮操作 */
      resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
          this.ids = selection.map(item => item.postId)
          this.single = selection.length != 1
          this.multiple = !selection.length
      },
      /** 新增患者信息按钮操作 */
      handleAdd() {
          this.reset();
          this.open = true;
          this.title = "添加患者信息";
      },
      /** 新增挂号单按钮操作 */
      registerAdd() {
          this.reset();
          this.opens = true;
          this.title = "添加挂号信息";
      },
      /** 查询按钮操作 */
      selectType() {
          findRegisterType().then(response => {
              this.typeOptions = response.data;
          });
          findDeptList().then(response => {
              this.deptOptions = response.data;
          });
          findPatientList().then(response => {
              this.patientOptions = response.data;
          });
          selectDoctorList().then(response => {
              this.doctorOptions = response.data;
          });
      },

      /** 提交按钮 */
      submitForm: function () {
          this.$refs["form"].validate(valid => {
              if (valid) {
                  if (this.form.postId != undefined) {
                      updatePost(this.form).then(response => {
                          this.msgSuccess("修改成功");
                          this.open = false;
                          this.getList();
                      });
                  } else {
                      addpatient(this.form).then(response => {
                          this.msgSuccess("新增成功");
                          this.open = false;
                          this.getList()
                      });
                  }
              }
          });
      },
      /** 挂号单提交按钮 */
      submitForms: function () {
          this.$refs["form"].validate(valid => {
              if (valid) {
                  if (this.form.postId != undefined) {
                      updatePost(this.form).then(response => {
                          this.msgSuccess("修改成功");
                          this.opens = false;
                          this.getList();
                      });
                  } else {
                      addRegister(this.form).then(response => {
                          this.msgSuccess("新增成功");
                          this.opens = false;
                          this.getList()
                      });
                  }
              }
          });
      },


  }
};
</script>
